import { createBrowserRouter, Navigate } from 'react-router-dom';
// createBrowserRouter  history路由  /xxx    通过事件popstate 监听地址 是否发生变化
// createHashRouter     hash路由 锚点样式的路由  #xxx    通过事件onhashchange 监听锚点 是否发生变化
import Login from '../pages/login';
import HOC from './HOC';
import Loading from '../components/loading';
import { Suspense, lazy } from 'react';

const Home = lazy(() => import('../pages/home'));
const Main = lazy(() => import('../pages/home/main'));
const Balance = lazy(() => import('../pages/home/balance'));
const RoleManagement = lazy(
  () => import('../pages/home/system/roleManagement')
);
const PermissionManagement = lazy(
  () => import('../pages/home/system/permissionManagement')
);
const UserManagement = lazy(
  () => import('../pages/home/system/userManagement')
);
const NoticePayment = lazy(() => import('../pages/home/noticePayment'));
const School = lazy(() => import('../pages/home/school'));
const Order = lazy(() => import('../pages/home/order'));
const ProjectManagement = lazy(
  () => import('../pages/home/payment/ProjectManagement')
);
const ScheduleManagement = lazy(
  () => import('../pages/home/payment/ScheduleManagement')
);
const DetailManagement = lazy(
  () => import('../pages/home/payment/DetailManagement')
);
const AssociatedUsers = lazy(
  () => import('../pages/home/system/associatedUsers')
);
/* 数据管理 */
const ClassManagement = lazy(
  () => import('../pages/home/data/ClassManagement/ClassManagement')
);
const StudentManagement = lazy(
  () => import('../pages/home/data/StudentManagement/StudentManagement')
);
const TeacherManagement = lazy(
  () => import('../pages/home/data/TeacherManagement/TeacherManagement')
);
/* 账户管理 */
const SchoolAccount=lazy(()=>import('../pages/home/account/schoolAccount'))
const StudentAccount=lazy(()=>import('../pages/home/account/studentAccount'))
//创建history的路由模式
const router = createBrowserRouter([
  {
    path: '/',
    element: <Navigate to="/login" />,
  },
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '/home',
    element: <Home />,
    children: [
      {
        path: '',
        element: (
          <Suspense fallback={<Loading />}>
            <Main />
          </Suspense>
        ),
      },
      {
        path: 'balance',
        // element: <HOC href="/home/balance" />,
        element: (
          <Suspense fallback={<Loading />}>
            <Balance />
          </Suspense>
        ),
      },
      {
        path: '/home/system/userManagement',
        // element: <HOC href="/home/system" />,
        element: (
          <Suspense fallback={<Loading />}>
            <UserManagement />
          </Suspense>
        ),
      },
      {
        path: '/home/system/permissionManagement',
        // element: <HOC href="/home/system" />,
        element: (
          <Suspense fallback={<Loading />}>
            <PermissionManagement />
          </Suspense>
        ),
      },
      {
        path: '/home/system/roleManagement',
        // element: <HOC href="/home/system" />,
        element: (
          <Suspense fallback={<Loading />}>
            <RoleManagement />
          </Suspense>
        ),
      },
      //关联用户  不用导航
      {
        path: 'associatedUsers',
        element: (
          <Suspense fallback={<Loading />}>
            <AssociatedUsers />
          </Suspense>
        ),
      },
      {
        path: 'noticePayment',
        // element: <HOC href="/home/noticePayment" />,
        element: (
          <Suspense fallback={<Loading />}>
            <NoticePayment />
          </Suspense>
        ),
      },
      /* 数据管理 */
      {
        path: '/home/data/classManagement',
        // element: <HOC href="/home/data" />,
        element: (
          <Suspense fallback={<Loading />}>
            <ClassManagement />
          </Suspense>
        ),
      },
      {
        path: '/home/data/studentManagement',
        // element: <HOC href="/home/data" />,
        element: (
          <Suspense fallback={<Loading />}>
            <StudentManagement />
          </Suspense>
        ),
      },
      {
        path: '/home/data/teacherManagement',
        // element: <HOC href="/home/data" />,
        element: (
          <Suspense fallback={<Loading />}>
            <TeacherManagement />
          </Suspense>
        ),
      },
      {
        path: 'school',
        // element: <HOC href="/home/school" />,
        element: (
          <Suspense fallback={<Loading />}>
            <School />
          </Suspense>
        ),
      },
      {
        path: 'order',
        // element: <HOC href="/home/order" />,
        element: (
          <Suspense fallback={<Loading />}>
            <Order />
          </Suspense>
        ),
      },
      /* 账户管理 */
      {
        path: '/home/account/schoolAccount',
        // element: <HOC href="/home/account" />,
        element: (
          <Suspense fallback={<Loading />}>
            <SchoolAccount />
          </Suspense>
        ),
      },
      {
        path: '/home/account/studentAccount',
        // element: <HOC href="/home/account" />,
        element: (
          <Suspense fallback={<Loading />}>
            <StudentAccount />
          </Suspense>
        ),
      },
      {
        path: '/home/payment/ProjectManagement',
        // element: <HOC href="/home/payment" />,
        element: (
          <Suspense fallback={<Loading />}>
            <ProjectManagement />
          </Suspense>
        ),
      },
      {
        path: '/home/payment/ScheduleManagement',
        // element: <HOC href="/home/payment" />,
        element: (
          <Suspense fallback={<Loading />}>
            <ScheduleManagement />
          </Suspense>
        ),
      },
      {
        path: '/home/payment/DetailManagement',
        // element: <HOC href="/home/payment" />,
        element: (
          <Suspense fallback={<Loading />}>
            <DetailManagement />
          </Suspense>
        ),
      },
    ],
  },
  {
    path: '*',
    element: <div>路径错误404</div>,
  },
]);
export default router;
